<!-- pages/index/index.vue -->
<template>
  <view class="content">
    <view class="exam-page">
      <!-- 自定义导航栏 -->
      <view class="custom-nav">
        <text class="nav-title">考研助手</text>
      </view>

      <!-- 滚动视图内容 -->
      <view class="swiper-container">
        <swiper class="swiper-box" 
                :circular="true"
                :autoplay="true" 
                :interval="3000" 
                :duration="500"
                @change="swiperChange">
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <image class="swiper-img" 
                   :src="item.imageUrl" 
                   mode="widthFix" 
                   @click="handleClick(item)">
            </image>
          </swiper-item>
        </swiper>
        <!-- 轮播指示点 -->
        <view class="dots">
          <view class="dot" 
                v-for="(item,index) in bannerList" 
                :key="index"
                :class="{'active': current === index}">
          </view>
        </view>
      </view>

      <!-- 政治考研提示 -->
      <view class="notice-bar">
        <text class="notice-icon">🔊</text>
        <text class="notice-text">《肖形势与政策》题库已更新至高分提升班！</text>
      </view>

      <!-- 功能按钮区 -->
      <view class="function-buttons">
        <view class="function-item" 
              v-for="(item, index) in functionItems" 
              :key="index"
              @tap="handleFunctionClick(item)">
          <image :src="item.icon" mode="aspectFit" class="function-icon"></image>
          <text class="function-text">{{ item.text }}</text>
        </view>
      </view>

      <!-- 热门题库区域 -->
      <view class="hot-questions">
        <view class="section-title">
          <text>🔥热门题库 | 肖徐腿三巨头 (☀️☀️☀️)</text>
        </view>
        
        <view class="question-grid">
          <view class="question-item" 
                v-for="(item, index) in questionItems" 
                :key="index"
                @tap="handleQuestionClick(item)">
            <view class="question-content">
              <text class="question-title">{{ item.title }}</text>
              <text class="question-desc">{{ item.description }}</text>
            </view>
            <image :src="item.icon" mode="aspectFit" class="question-icon"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom-tab-bar">
      <view class="tab-item" 
            v-for="(item, index) in bottomNavItems" 
            :key="index"
            @tap="switchTab(index)">
        <image :src="currentTab === index ? item.activeIcon : item.icon" 
               mode="aspectFit" 
               class="tab-icon"></image>
        <text class="tab-text"
              :class="{ 'active': currentTab === index }">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 设置导航栏样式
onLoad(() => {
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#A8BF8F',
  })
})

const bannerList = ref([
  {
    id: 1,
    imageUrl: '/static/banner2/1.jpg',
    type: 'page'
  },
  {
    id: 2,
    imageUrl: '/static/banner/2.jpg',
    link: '/pages/unlock-instruction/unlock-instruction',
    type: 'page'
  },
  {
    id: 3,
    imageUrl: '/static/banner/3.jpg',
    link: '/pages/unlock-instruction/unlock-instruction',
    type: 'page'
  },
  {
    id: 4,
    imageUrl: '/static/banner/4.jpg',
    link: '/pages/unlock-instruction/unlock-instruction',
    type: 'page'
  },
  {
    id: 5,
    imageUrl: '/static/banner/5.jpg',
    link: '/pages/unlock-instruction/unlock-instruction',
    type: 'page'
  },
  {
    id: 6,
    imageUrl: '/static/banner/6.jpg',
    link: '/pages/unlock-instruction/unlock-instruction',
    type: 'page'
  }
])

// 倒计时相关
const targetDate = new Date('2024-12-23T00:00:00')
const timeLeft = ref({
  days: '00',
  hours: '00',
  minutes: '00',
  seconds: '00'
})

let timer = null

const calculateTimeLeft = () => {
  const now = new Date()
  const difference = targetDate - now
  
  if (difference > 0) {
    const days = Math.floor(difference / (1000 * 60 * 60 * 24))
    const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))
    const seconds = Math.floor((difference % (1000 * 60)) / 1000)
    
    timeLeft.value = {
      days: String(days).padStart(2, '0'),
      hours: String(hours).padStart(2, '0'),
      minutes: String(minutes).padStart(2, '0'),
      seconds: String(seconds).padStart(2, '0')
    }
  }
}

// 状态变量
const current = ref(0)
const currentTab = ref(0)
const statusBarHeight = ref(0)

// 功能按钮数据
const functionItems = ref([
 /* { 
    icon: '/static/icons/unlock.png', 
    text: '试卷打印',
    url: '/pages/unlock/index'
  }, */
  { 
     icon: '/static/icons/pdf.png', 
     text: '试卷导出',
    url: '/pages/paper/download'
  },
  { 
    icon: '/static/icons/catalog.png', 
    text: '全题库目录',
    url: '/pages/political/list'
  },
  { 
      icon: '/static/icons/activation.png', 
      text: '搭子打卡',
      url: '/pages/partner/select-partner'
    }

])

// 题库数据
const questionItems = ref([
  {
    title: '肖老8套卷',
    icon: '/static/icons/exam.png',
    url: '/pages/exam/xiao8'
  },
  {
    title: '名师题库',
    icon: '/static/icons/unlock.png',
    url: '/pages/exam/master18'
  },
  {
    title: '肖老1000题',
    icon: '/static/icons/handbook.png',
    url: '/pages/exam/xiao1000'
  },
  {
    title: '肖背诵手册190题',
    icon: '/static/icons/handbook.png',
    url: '/pages/exam/xiao190'
  },
  {
    title: '徐6套卷',
  
    icon: '/static/icons/exam.png',
    url: '/pages/exam/xu6'
  },
  {
    title: '腿8套卷',

    icon: '/static/icons/exam.png',
    url: '/pages/exam/tui8'
  }
])

// 底部导航数据
const bottomNavItems = ref([
  { 
    icon: '/static/icons/politics.png',
    activeIcon: '/static/icons/politics.png', 
    text: '首页',
    url: '/pages/index/index'
  },
  { 
    icon: '/static/icons/练习.png',
    activeIcon: '/static/icons/练习.png', 
    text: '练习',
    url: '/pages/exercise/practice'
  },
  { 
    icon: '/static/icons/home1.png',
    activeIcon: '/static/icons/home1.png', 
    text: '社区',
    url: '/pages/community/index'
  },
  { 
    icon: '/static/icons/user.png',
    activeIcon: '/static/icons/user.png', 
    text: '我的',
    url: '/pages/my/my'
  }
])

// 事件处理方法
const swiperChange = (e) => {
  current.value = e.detail.current
}

const handleClick = (item) => {
  uni.navigateTo({
    url: item.link
  })
}

const handleFunctionClick = (item) => {
  uni.navigateTo({
    url: item.url,
    fail: (err) => {
      console.error('导航失败：', err)
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  })
}

const handleQuestionClick = (item) => {
  uni.navigateTo({
    url: item.url,
    fail: (err) => {
      console.error('导航失败：', err)
      uni.showToast({
        title: '该题库正在准备中',
        icon: 'none'
      })
    }
  })
}

const switchTab = (index) => {
  const item = bottomNavItems.value[index]
  currentTab.value = index
  
  uni.switchTab({
    url: item.url,
    success: () => {
      console.log('页面跳转成功')
    },
    fail: (err) => {
      console.error('切换标签页失败：', err)
      uni.navigateTo({
        url: item.url,
        fail: (navigateErr) => {
          console.error('导航失败：', navigateErr)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    }
  })
}

// 生命周期
onMounted(() => {
  calculateTimeLeft()
  timer = setInterval(calculateTimeLeft, 1000)
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  padding-bottom: 120rpx; /* 为底部导航留出空间 */


.exam-page {
  background-color: #f5f5f5;
  padding: 20rpx;
  padding-bottom: env(safe-area-inset-bottom); /* 适配底部安全区域 */
}
}
/* 导航栏 */
.custom-nav {
  width: 100%;
  height: 100rpx;
  background-color: #A8BF8F;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  
  .nav-title {
    color: #ffffff;
    font-size: 32rpx;
    font-weight: bold;
  }
}

/* 轮播图 */
.swiper-container {
  width: 100%;
  height: 220rpx;
  position: relative;
  margin-top: 0rpx; /* 为导航栏留出空间 */
  
  .swiper-box {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
    overflow: hidden; /* 确保圆角正常显示 */
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
    
    .swiper-img {
      width: 100%; /* 修改为100%占满整个容器宽度 */
      height: 100%;
      border-radius: 12rpx;
    }
  }

 
  
  .dots {
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    
    .dot {
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.5);
      margin: 0 8rpx;
      transition: all 0.3s;
      
      &.active {
        width: 24rpx;
        border-radius: 12rpx;
        background-color: #ffffff;
      }
    }
  }
}

/* 通知栏 */
.notice-bar {
  background-color: #FFF8E1;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  
  .notice-icon {
    margin-right: 20rpx;
  }
  
  .notice-text {
    font-size: 28rpx;
    color: #333333;
  }
}

/* 功能按钮 */
.function-buttons {
  background-color: #ffffff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 16rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .function-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 10rpx;
  }
  
  .function-text {
    font-size: 24rpx;
    color: #333333;
  }
}

/* 题库区域 */
.hot-questions {
  padding: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.question-item {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: space-between;
  
  .question-content {
    flex: 1;
    
    .question-title {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .question-desc {
      font-size: 24rpx;
      color: #666666;
    }
  }
  
 .question-icon {
       width: 48rpx;
       height: 48rpx;
       margin-left: 20rpx;
     }
   }
   
   
 
 /* 底部导航栏样式 */
 .bottom-tab-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   height: 100rpx;
   background-color: #ffffff;
   display: flex;
   justify-content: space-around;
   align-items: center;
   border-top: 1rpx solid #eeeeee;
   padding-bottom: env(safe-area-inset-bottom); /* 适配底部安全区域 */
   z-index: 999; /* 确保导航栏在最上层 */
   box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); /* 添加顶部阴影效果 */
 }
 
 .tab-item {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 10rpx 0;
   position: relative; /* 为徽标定位做准备 */
   
   /* 点击效果 */
   &:active {
     opacity: 0.8;
   }
 }
 
 .tab-icon {
   width: 48rpx;
   height: 48rpx;
   margin-bottom: 6rpx;
 }
 
 .tab-text {
   font-size: 24rpx;
   color: #666666;
   line-height: 1.2;
   
   &.active {
     color: #A8BF8F; /* 使用主题色 */
     font-weight: bold;
   }
 }
 
 /* 适配iPhone底部安全区 */
 @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
   .bottom-tab-bar {
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }
 }
 
 /* 暗黑模式适配 */
 @media (prefers-color-scheme: dark) {
   .bottom-tab-bar {
     background-color: #1c1c1e;
     border-top-color: #2c2c2e;
   }
   
   .tab-text {
     color: #8e8e93;
     
     &.active {
       color: #A8BF8F;
     }
   }
 }
 </style>